<template>
    <div class="category-page">
        <TopSearchBar @search="onSearch" @click-left="onClickLeft"/>
        <van-tabs v-model="active" @click="onChose">
            <van-tab :title="item.categoryName" v-for="(item,index) in childListData" :key="index">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                    class="all-goods"
                >
                    <GoodsListCard :info="goodsInfoList"/>
                </van-list>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    import TopSearchBar from "../../components/TopSearchBar";
    import GoodsListCard from "../../components/GoodsListCard";
    export default {
        name: "categoryChild",
        components: {
            TopSearchBar,
            GoodsListCard
        },
        data() {
            return {
                keyword: "",
                active: 0,
                categoryData: {},
                fCateData: [],
                sCateData: [],
                childListData: [
                    {
                        backgroundPic: "",
                        categoryIcon: "",
                        categoryName: "精选",
                        childList: [],
                        id: "",
                        pid: "0"
                    }
                ],
                page: 1,
                pages: 2,
                size: 10,
                activeCategoryId: "",
                goodsInfoList: [],
                loading: false,
                finished: false,

                imgSrc: [
                    require('@img/img-error.png')
                ],
                beforeActive: 0
            }
        },
        created() {
            this.getAllGoodsCategoryList();
        },
        methods: {
            onClickLeft() {
                this.$router.push({
                    path: "/category"
                })
            },
            onSearch(keyword) {
                this.$router.push({
                    path: "/search",
                    query: {
                        keyword: keyword
                    }
                })
            },

            onChose(e) {
                if (this.beforeActive !== e) {
                    this.beforeActive = e;
                    this.page = 1;
                    this.pages = 2;
                    this.finished = false;
                    if (e > 0) {
                        this.activeCategoryId = this.childListData[e - 1].id;
                    } else {
                        this.activeCategoryId = this.sCateData.id;
                    }
                    this.goodsInfoList = [];
                    this.getGoodsInfoList(this.activeCategoryId);
                }

            },
            formatGoodsSale: function (index) {
                let data = ["热门", "最新", "精品", "爆款", "推荐"];
                return data[index];
            },
            /**
             * 获取全部分类
             */
            async getAllGoodsCategoryList() {
                let params = this.$route.query;
                let self = this;
                this.$api.getAllGoodsCategoryList().then(res => {
                    self.categoryData = res.data.data;
                    self.fCateData = self.categoryData[params.fid];
                    self.sCateData = self.fCateData['childList'][params.sid];
                    self.childListData[0].categoryId = self.fCateData['childList'][params.sid].categoryId;
                    self.childListData = self.childListData.concat(self.fCateData['childList']);
                    this.activeCategoryId = self.sCateData.categoryId;
                });
            },
            async getGoodsInfoList(categoryId) {
                let self = this;
                this.$api.getGoodsInfoList({
                    "beGroup": "",
                    "categoryId": categoryId,
                    "goodsName": this.keyword,
                    "goodsSale": "",
                    "navigation": "",
                    "page": this.page,
                    "shopId": "",
                    "size": this.size
                }).then(res => {
                    if (res.data.data.list === []) {
                        self.finished = true;
                    } else {
                        self.page = res.data.data.pageNum;
                        self.pages = res.data.data.pages;
                        self.goodsInfoList.push(...res.data.data.list);
                        self.loading = false;
                    }
                });
            },
            onLoad() {
                if (this.page >= this.pages) {
                    this.finished = true
                } else {
                    this.page++;
                    this.getGoodsInfoList(this.activeCategoryId);
                }
            },
            toGoodsDetail(obj) {
                this.$router.push({
                    path: "/goods/goodsDetail",
                    query: {
                        goodsId: obj.goodsId,
                    }
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .category-page {
        .van-nav-bar {
            .van-nav-bar__title {
                max-width: 80%;
            }

            .van-search {
                background-color: transparent;

                .van-search__content {
                    border-radius: 20px;
                }
            }

            .van-icon-search::before {
                color: #969799;
            }

            .van-icon-search {
                color: #969799;
            }
        }


    }
</style>